<template>
	<view class="visualione-item">
		<div class="Visualization_bottom_left animate__animated animate__slideInLeft">
			<div class="animate__animated animate__slideInLeft" v-if="isTpf1" style="height: 100%;">
				<!-- 碳排放模块左侧 -->
				<Carbon />
			</div>
			<div class="animate__animated animate__slideInLeft" v-else-if="isGuangfu" style="height: 100%;">
				<!-- 光伏模块左侧 -->
				<GuangfuLeft />
			</div>
			<div class="animate__animated animate__slideInLeft" v-else>
				<reddInfo :deviceCount="deviceNum" />
			</div>
			<div class="footer-pan"></div>
		</div>
		<view class="Visualization_bottom_right">
			<div class="br_top">
				<div class="br_video" style="height: 100%"></div>
				<div class="button-group ignore-visualization-buton-group">
					<div class="homeIconLayout">
						<view v-for="(item, index) in homeIcon" :key="item.id">
							<div @click="goRedd(index)" class="homeIconimgs" ref="floor" style="position: relative">
								<img :src="currentIndex === index ? item.src2 : item.src1" alt="图标" class="imgIcon" />
								<span :class="currentIndex === index ? 'hometext' : 'hometext1'">{{ item.name }}</span>
								<div v-if="showFloors && index === 1" class="showFloorDiv">
									<div v-for="i in 6">
										<div @click.stop="changeFloorIndex(i)"
											:class="{ highLightFloor: currShowFloor === i }">
											{{ i }}F
											<div class="bg"></div>
										</div>
									</div>
								</div>
							</div>
						</view>
					</div>
				</div>
			</div>
			<view class="br_bottom animate__animated animate__bounceInUp" v-if="true">
				<view class="bottomLayout animate__animated animate__bounceInUp" v-if="isFloor">
					<!-- 楼层 -->
					<Floor :floorIndex="currShowFloor" />
				</view>

				<view class="bottomLayout animate__animated animate__bounceInUp" v-else-if="isZh1">
					<!-- 综合 -->
					<Bottom />
				</view>

				<view class="bottomLayout animate__animated animate__bounceInUp" v-else-if="isTpf1">
					<!-- 碳排放 -->
					<CarbonBottom />
				</view>

				<view class="bottomLayout animate__animated animate__bounceInUp" v-else-if="isLight">
					<!-- 照明 -->
					<Light />
				</view>

				<view class="bottomLayout animate__animated animate__bounceInUp" v-else-if="isNewtrend">
					<!-- 新风 -->
					<NewTrend />
				</view>

				<view class="bottomLayout animate__animated animate__bounceInUp" v-else-if="isHvac">
					<!-- 暖通 -->
					<Hvac />
				</view>

				<view class="bottomLayout animate__animated animate__bounceInUp" v-else-if="isSunshade">
					<!-- 遮阳 -->
					<Sunshade />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $config from '@/common/config.js';
	import reddInfo from './redd/index.vue';
	import Carbon from './carbon/index.vue';
	import Bottom from './bottom/index.vue';
	import Floor from './floor/index.vue';
	import NewTrend from './newtrend/index.vue';
	import Hvac from './hvac/index.vue';
	import Light from './light/index.vue';
	import Sunshade from './sunshade/index.vue';
	import GuangfuLeft from './guangfuleft/index.vue';
	import CarbonBottom from "./carbonbottom/index.vue"
	import GuangfuBottom from "./guangfubottom/index.vue"
	import {
		VIDEOLIST
	} from "@/common/const_data.js";
	export default {
		components: {
			Carbon,
			reddInfo,
			Bottom,
			Floor,
			NewTrend,
			Hvac,
			Light,
			Sunshade,
			GuangfuLeft,
			CarbonBottom,
			GuangfuBottom
		},
		data() {
			return {
				isZh1: true,
				isTpf1: false,
				isTpf2: false,
				isFloor: false,
				isLight: false,
				isNewtrend: false,
				isHvac: false,
				isSunshade: false,
				isGuangfu: false,
				showFloors: false,
				currShowFloor: 1,
				currentIndex: 0,
				changeMStatus: false,
				homeIcon: [{
						id: '1',
						src1: $config.comstatic + '/shouyeicons/zh.png',
						src2: $config.comstatic + '/shouyeicons/szh.png',
						name: '综合',
						code: 'zonghe',
					},

					{
						id: '2',
						src1: $config.comstatic + '/shouyeicons/lc.png',
						src2: $config.comstatic + '/shouyeicons/slc.png',
						name: '楼层',
						code: 'floor',
					},

					{
						id: '3',
						src1: $config.comstatic + '/shouyeicons/xf.png',
						src2: $config.comstatic + '/shouyeicons/sxf.png',
						name: '新风',
						code: 'newtrend',
					},

					{
						id: '4',
						src1: $config.comstatic + '/shouyeicons/nt.png',
						src2: $config.comstatic + '/shouyeicons/snt.png',
						name: '暖通',
						code: 'nuantong',
					},

					{
						id: '5',
						src1: $config.comstatic + '/shouyeicons/zm.png',
						src2: $config.comstatic + '/shouyeicons/szm.png',
						name: '照明',
						code: 'light',
					},

					{
						id: '6',
						src1: $config.comstatic + '/shouyeicons/zy.png',
						src2: $config.comstatic + '/shouyeicons/szy.png',
						name: '遮阳',
						code: 'light',
					}
				]
			}
		},
		props: {
			deviceNum: {
				type: Number,
				default: 1
			},
			currentTabIndex: {
				type: Number
			}
		},
		watch: {
			currentTabIndex: {
				immediate: true,
				handler(newValue, oldValue) {
					// console.log(newValue, '---newValue----')
					// console.log(oldValue, '---oldValue----')
					if (newValue == 0) {
						// console.log('---newValue-0===>>>>')
						this.currentIndex = 0
						this.isTpf1 = false
						this.changeRedd(this.currentIndex)
					}
					if (newValue == 3) {
						// console.log('---newValue-5===>>>>')
						this.currentIndex = 6
						this.isTpf1 = true
						this.changeRedd(this.currentIndex)
					}
				}
			}
		},
		mounted() {
			let that = this;
			document.addEventListener("keydown", function(event) {
				if (event.key === "ArrowDown") {
					console.log('==ArrowDown>>'); // 触发下一页按钮的点击事件
					if (that.currentIndex < 5) {
						if (that.currentIndex == 1) {
							if (that.currShowFloor < 6) {
								that.changeFloorIndex(that.currShowFloor + 1);
							} else {
								that.goRedd(2);
							}
						} else {
							that.goRedd(that.currentIndex + 1);
						}
					} else if (that.currentIndex == 5) {
						that.goRedd(0);
					} else if (that.currentIndex == 6) {
						that.goRedd(0);
					}
				} else if (event.key === "ArrowUp") {
					console.log('==ArrowUp>>'); // 触发下一页按钮的点击事件
					if (that.currentIndex > 0) {
						if (that.currentIndex == 1) {
							if (that.currShowFloor > 1) {
								that.changeFloorIndex(that.currShowFloor - 1);
							} else {
								that.goRedd(0);
							}
						} else {
							that.goRedd(that.currentIndex - 1);
						}
					} else if (that.currentIndex == 0) {
						that.goRedd(5);
					}
				}
			});
		},
		methods: {
			goRedd(index) {
				if (this.changeMStatus) {
					return false;
				}
				uni.showLoading({
					mask: true
				})
				this.showFloors = false;
				this.currentIndex = index;
				this.$emit('changeEvent', 'http://portal.xumengte.com' + VIDEOLIST[index].url);
				this.changeRedd(index);
				let tabIndex = index == 6 ? 3 : 0;
				this.$emit('changeTabIndex', tabIndex)
				this.changeMStatus = true;
				setTimeout(() => {
					this.changeMStatus = false;
					uni.hideLoading()
				}, 2000);
			},
			changeRedd(index) {
				if (index == 0) {
					this.isZh1 = true;
					this.isTpf1 = false;
					this.isTpf2 = false;
					this.isFloor = false;
					this.isLight = false;
					this.isNewtrend = false;
					this.isHvac = false;
					this.isSunshade = false;
					this.isGuangfu = false;
				} else if (index == 1) {
					this.isZh1 = false;
					this.isTpf1 = false;
					this.isTpf2 = false;
					this.isFloor = true;
					this.isLight = false;
					this.isNewtrend = false;
					this.isHvac = false;
					this.isSunshade = false;
					this.isGuangfu = false;
					this.showFloors = true;
					this.currShowFloor = 1;
				} else if (index == 2) {
					this.isZh1 = false;
					this.isTpf1 = false;
					this.isTpf2 = false;
					this.isFloor = false;
					this.isLight = false;
					this.isNewtrend = true;
					this.isHvac = false;
					this.isSunshade = false;
					this.isGuangfu = false;
				} else if (index == 3) {
					this.isZh1 = false;
					this.isTpf1 = false;
					this.isTpf2 = false;
					this.isFloor = false;
					this.isLight = false;
					this.isNewtrend = false;
					this.isHvac = true;
					this.isSunshade = false;
					this.isGuangfu = false;
				} else if (index == 4) {
					this.isZh1 = false;
					this.isTpf1 = false;
					this.isTpf2 = false;
					this.isFloor = false;
					this.isLight = true;
					this.isNewtrend = false;
					this.isHvac = false;
					this.isSunshade = false;
					this.isGuangfu = false;
				} else if (index == 5) {
					this.isZh1 = false;
					this.isTpf1 = false;
					this.isTpf2 = false;
					this.isFloor = false;
					this.isLight = false;
					this.isNewtrend = false;
					this.isHvac = false;
					this.isSunshade = true;
					this.isGuangfu = false;
				} else { //碳排放
					this.isZh1 = false
					this.isTpf1 = true;
					this.isTpf2 = false
					this.isFloor = false
					this.isLight = false
					this.isNewtrend = false
					this.isHvac = false
					this.isSunshade = false
					this.isGuangfu = false
				}
			},
			changeFloorIndex(index) {
				uni.showLoading({
					mask: true
				})
				this.currentIndex = 1;
				this.currShowFloor = index;
				this.isFloor = true;
				this.$emit('changeEvent', 'http://portal.xumengte.com/dlly/floor' + index + '.mp4');
				setTimeout(() => {
					uni.hideLoading()
				}, 2000);
			}
		},
	}
</script>

<style>
	.visualione-item {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: stretch;
		flex-flow: row nowrap;
		justify-content: space-between;
	}

	.Visualization_bottom_left,
	.Visualization_bottom_right {
		height: 100%;
	}

	.Visualization_bottom_left {
		align-self: stretch;
		width: 30%;
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	.Visualization_bottom_left::before {
		position: absolute;
		top: -2px;
		left: -2px;
		width: 16px;
		height: 16px;
		border-top: 3px solid #76828f;
		border-left: 3px solid #76828f;
		content: '';
	}

	.Visualization_bottom_left::after {
		position: absolute;
		top: -2px;
		right: -2px;
		width: 16px;
		height: 16px;
		border-top: 3px solid #76828f;
		border-right: 3px solid #76828f;
		content: '';
	}

	.footer-pan {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 0;
	}

	.footer-pan::before {
		position: absolute;
		bottom: -2px;
		left: -2px;
		width: 16px;
		height: 16px;
		border-bottom: 3px solid #76828f;
		border-left: 3px solid #76828f;
		content: '';
	}

	.footer-pan::after {
		position: absolute;
		bottom: -2px;
		right: -2px;
		width: 16px;
		height: 16px;
		border-bottom: 3px solid #76828f;
		border-right: 3px solid #76828f;
		content: '';
	}

	.Visualization_bottom_right {
		width: 70%;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		margin-left: 10px;
	}

	.br_top {
		flex: 1;
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}

	.br_bottom {
		width: 100%;
		height: 35vh;
		position: relative;
		display: flex;
	}

	.br_bottom>div {
		width: 100%;
		height: 100%;
	}

	.bottomLayout {
		width: 100%;
		height: 100%;
	}

	.br_video {
		flex: 1;
	}

	.button-group {
		height: 100%;
		width: 120px;
		display: flex;
		flex-flow: column nowrap;
		align-items: flex-end;
	}

	.homeIconLayout {
		display: flex;
		height: 92%;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		z-index: 2;
		margin-right: 4%;
	}

	.homeIconimgs {
		display: flex;
		flex: 1;
		height: 100%;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
		margin-top: 1vh;
		z-index: 2;
	}

	.imgIcon {
		display: flex;
		height: 4vh;
		max-height: 48px;
	}

	.hometext,
	.hometext1 {
		font-size: 1.4vh;
		text-align: center;
		font-weight: bold;
		letter-spacing: 1px;
	}

	.hometext {
		color: #fff;
	}

	.hometext1 {
		color: rgba(255, 255, 255, 0.5);
	}

	.showFloorDiv {
		position: absolute;
		color: white;
		display: flex;
		flex-direction: column;
		right: 95%;
		height: 30vh;
		top: -100%;
		border-radius: 10px;
	}

	.showFloorDiv>div {
		width: 90px;
		text-align: center;
		height: 3vh;
		font-size: 18px;
		color: #b6b6b6;
		flex: 1;
		margin-bottom: 2vh;
		z-index: 99;
	}

	.highLightFloor {
		background: linear-gradient(270deg,
				rgba(137, 205, 255, 0) 0%,
				rgba(137, 205, 255, 0.3) 29%,
				rgba(137, 205, 255, 0.5) 54%,
				rgba(137, 205, 255, 0.3) 73%,
				rgba(137, 205, 255, 0) 100%);
		width: 100%;
		height: 100%;
		font-size: 22px;
		position: relative;
		color: white;
	}

	.highLightFloor .bg {
		position: absolute;
		height: 30px;
		width: 30px;
		top: 0;
		left: -28px;
		background: url('http://portal.xumengte.com/homeImg/Group156.png') no-repeat 50% 50%;
		background-size: 120px 120px;
		content: '';
		z-index: -1;
	}
</style>
